<template>
  <div>
    <logintitle :isshow="true" :title="'登录'" :right="'注册'" @click="$router.push('/registered')" ></logintitle>
    <div class="login-body">
      <input type="text" class="border-bom" placeholder="请输入手机号" v-model="loginText">
      <input type="password" placeholder="请输入密码" v-model="loginPwd">
      <dd>忘记密码?</dd>
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import logintitle from './logintitle'
import { mapState, mapMutations } from 'vuex'
import Vue from 'vue'
import { Notify } from 'vant'
Vue.use(Notify)
export default {
  data () {
    return {
      loginText: '',
      loginPwd: ''
    }
  },
  mounted () {
    this.settabbar(false)
  },
  methods: {
    login () {
      var flag = this.userList.some(item => {
        return (item.name === this.loginText && item.pwd === this.loginPwd)
      })
      if (!flag) {
        this.$notify({
          message: '账号，密码错误',
          duration: 800,
          color: '#ffffff',
          background: '#ff0000'
        })
        return false
      } else {
        this.$notify({
          message: '登录成功',
          duration: 800,
          color: '#ffffff',
          background: '#4285F4'
        })
      }
      localStorage.setItem('user', this.loginText)
      setTimeout(() => {
        this.$router.push('/center')
      }, 800)
    },
    ...mapMutations('tabbar',['settabbar']),
  },
  components: {
    logintitle
  },
  computed: {
    ...mapState('user', ['userList']),
    ...mapState('tabbar', ['istabbarshow'])
  },
  destroyed () {
    this.settabbar(true)
  }
}
</script>

<style lang="scss">
  .login-body{
    margin: 0 15px;
    background: #ffffff;
    margin-top: 15px;
    height: 100px;
    padding:0 15px;
    position: relative;
    input{
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      outline: none;
      border: none;
    }
    .border-bom{
      border-bottom: 1px solid #EAEAEA;
    }
    dd{
      font-size: 15px;
      position: absolute;
      right: 10px;
      bottom: 12px;
    }
    button{
      cursor: pointer;
      margin: 0 auto;
      vertical-align: middle;
      width: 332px;
      height: 42px;
      background-color: #FFD444;
      font-size: 14px;
      position: absolute;
      bottom: -58px;
      border: none;
      left: 0;
      padding: 1px 6px;
      box-sizing: content-box;
    }
  }
</style>
